<style lang="scss" scoped>

.inner {
    padding-top: 30px;
    text-align: center;
    color: #333;
    .inner-title {
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 0.5rem;
        span {
            font-size: 14px;
            color: #ff6600;
            letter-spacing: 0;
            font-weight: normal;
        }
    }
}

 /*科研合作 */
 .cooperate {
     height: 400px;
     background: rgba(255, 255, 255, 1);
     .cooperate-inner {
         padding: 60px 50px 0;
         position: relative;
         height: 100%;
         .cooperate-left,
         .cooperate-right {
             position: absolute;
             top: 70%;
             width: 40px;
             height: 40px;
             background-image: url('/static/images/home/left.png');
             background-size: 200% 200%;
         }
         .cooperate-left {
             left: 0;
             background-position: -1px -1px;
             &:hover {
                 background-position: -1px -40px;
             }
         }
         .cooperate-right {
             right: 0;
             background-position: -40px -1px;
             &:hover {
                 background-position: -40px -40px;
             }
         }
         .cooperate-content {
             width: 100%;
             height: 198px;
             position: relative;
             .cooperate-pic {
                 width: 100%;
                 height: 100%;
                 position: absolute;
                 top: 0;
                 left: 0;
                 &:hover {

                     transition: all ease .10s; //     top:-10px;
                     box-shadow: 0 0 10px #999;
                     .cooperate-bg {
                         display: block;
                     }
                     .cooperate-tras {
                         // background:rgba(25, 150, 205, 1);
                         height: 40px;
                     }
                 }
                 .cooperate-tras {
                     width: 100%;
                     height: 0;
                     background: #178ec1;
                     transition-property: height;
                     transition-duration: .3s; //transition-delay:.2s;
                     z-index: -1;
                     position: absolute;
                     bottom: 0;
                 }
                 .cooperate-bg {
                     width: 100%;
                     height: 100%;
                     position: absolute;
                     top: 0;
                     left: 0;
                     z-index: 222;
                     background: rgba(0, 0, 0, .3);
                     color: #fff;
                     display: none;
                     p {
                         padding: 0 20px;
                         text-indent: 2rem;
                         font-size: 14px;
                     }
                 }
                 .cooperate-title {
                     position: absolute;
                     bottom: 0;
                     left: 0;
                     z-index: 333;
                     width: 100%;
                     height: 40px;
                     background: rgba(0, 0, 0, .6);
                     color: #fff;
                     text-align: center;
                     line-height: 40px;
                     transition: all 1s ease 0;
                 }
             }
             .cooperate-pic.cooperate-pic-fs {
                 background: url('/static/images/home/fd.png') no-repeat;
                 background-size: 100% 100%;
             }
             .cooperate-pic.cooperate-pic-dz {
                 background: url('/static/images/home/dz.jpg') no-repeat;
                 background-size: 100% 100%;
             }
             .cooperate-pic.cooperate-pic-broad {
                 background: url('/static/images/home/broad.jpg') no-repeat;
                 background-size: 100% 100%;
             }
             .cooperate-pic.cooperate-pic-sc {
                 background: url('/static/images/home/hb.png') no-repeat;
                 background-size: 100% 100%;
             }
             .cooperate-pic.cooperate-pic-th {
                 background: url('/static/images/home/xj.png') no-repeat;
                 background-size: 100% 100%;
             }
             .cooperate-pic.cooperate-pic-xh {
                 background: url('/static/images/home/bjxh.jpg') no-repeat;
                 background-size: 100% 100%;
             }
         }
     }
     .swiper-wrapper {
         height: 198px;
         .swiper-slide {
             width: 275px;
             height: 198px;
         }
     }
 }

</style>
<template>
    <div class="parnter">
        
    <div class="cooperate">
        <div class="inner container">
            <div class="inner-title">科研合作</div>
            <div class="cooperate-inner swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="cooperate-content">
                            <div class="cooperate-pic cooperate-pic-xh">
                                <div class="cooperate-bg">
                                    <div style="padding:18px 0 10px;"><img src="/static/images/home/xhlg.png" height="40" width="40" /></div>
                                    <p>北京协和医院是集医疗、科研、教学为一体的大型综合医院。中国医学科学院临床医学研究所，中华人民共和国卫生部指定的诊治疑难重症的技术指导中心。</p>
                                </div>
                                <div class="cooperate-title">北京协和医院
                                    <div class="cooperate-tras"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="cooperate-content">
                            <div class="cooperate-pic cooperate-pic-fs">
                                <div class="cooperate-bg">
                                    <div style="padding:18px 0 10px;"><img src="/static/images/home/fdlg.png" height="40" width="40" /></div>
                                    <p>复旦大学附属儿科医院是一所集医辽、教学、科研、预防为一体的儿童医院，是上海市医保定点单位。</p>
                                </div>
                                <div class="cooperate-title">上海复旦儿科
                                    <div class="cooperate-tras"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="cooperate-content">
                            <div class="cooperate-pic cooperate-pic-dz">
                                <div class="cooperate-bg">
                                    <div style="padding:18px 0 10px;"><img src="/static/images/home/dzlg.png" height="40" width="40" /></div>
                                    <p>中国医学科学院肿瘤医院是一所集医教研防于一体的三级肿瘤专科医院，是北京市医保定点医院。</p>
                                </div>
                                <div class="cooperate-title">中国医学科学院肿瘤医院
                                    <div class="cooperate-tras"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="cooperate-content">
                            <div class="cooperate-pic cooperate-pic-sc">
                                <div class="cooperate-bg">
                                    <div style="padding:18px 0 10px;"><img src="/static/images/home/hblg.png" height="40" width="40" /></div>
                                    <p>湖北省肿瘤医院是湖北省卫生计生委直属的集预防、医疗、康复、科研、教学于一体的大型三级肿瘤专科医院，是武汉市医保定点医院。</p>
                                </div>
                                <div class="cooperate-title">湖北省肿瘤医院
                                    <div class="cooperate-tras"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="cooperate-content">
                            <div class="cooperate-pic cooperate-pic-broad">
                                <div class="cooperate-bg">
                                    <div style="padding:18px 0 10px;"><img src="/static/images/home/bdlg.png" height="40" width="40" /></div>
                                    <p>博德研究所是一个高水平的基因组学研究中心，隶属于美国麻省理工学院和哈佛大学。</p>
                                </div>
                                <div class="cooperate-title">Broad研究所
                                    <div class="cooperate-tras"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div>
</template>
<script>
export default {
    name: "parnter",
    data(){
        return{

        }
    },
    methods:{

    },
    mounted() {
        var swiper = new Swiper('.swiper-container', {
            loop: true,
            autoplay: 4000,
            slidesPerView: 3,
            spaceBetween: 91
        });
    }
}
</script>
